<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from 'vue'
import MenuItem from "@/components/menuItem/menu-item.vue";
import type {Menu} from "@/components/menuItem/types/menuItemTypes.ts";
import {sendGlobalMessage} from "@/hooks/globalmessage.ts";

export default defineComponent({
  name: 'compMenuItem',
  components: {MenuItem},

  setup() {

    const data = reactive({
      propList: [
        {
          prop: "menu",
          defaultValue: "空",
          instructions: "菜单属性对象 请查看types文件夹下types.ts文件"
        },
        {
          prop: "customProps",
          defaultValue: "DEFAULT_CUSTOM_MENU_ITEM_PROP",
          instructions: "相关属性配置 请查看types文件夹下types.ts文件"
        },

      ],
      emitMethodList:[
        {
          name: "checkItem",
          param: "menu:Menu",
          instructions: "点击的菜单项"
        }
      ],
      menuList:[
        {
          id: '0',
          title: '首页',
          route: '/home',
          level: 0,
          icon: 'HomeFilled',
          pid: '0',
          type: 0, // 菜单
          permissionLevel: 0,
        },
        {
          id: '2',
          title: '系统管理',
          route: '/system',
          level: 0,
          icon: 'DocumentCopy',
          pid: '0',
          type: 0,
          permissionLevel: 0,
          children: [
            {
              id: '21',
              title: '用户管理',
              route: '/user',
              level: 1,
              icon: 'User',
              pid: '2',
              type: 0,
              permissionLevel: 0,
            },
            {
              id: '22',
              title: '角色管理',
              route: '/role',
              level: 1,
              icon: 'UserFilled',
              pid: '2',
              type: 0,
              permissionLevel: 0,
            },
            {
              id: '23',
              title: '菜单管理',
              route: '/menu',
              level: 1,
              icon: 'Memo',
              pid: '2',
              type: 0,
              permissionLevel: 0,
              children: []
            },
            {
              id: '24',
              title: '404报错',
              route: '/404',
              level: 1,
              icon: 'Memo',
              pid: '2',
              type: 0,
              permissionLevel: 0,
              children: []
            },
            {
              id: '25',
              title: '502网关异常',
              route: '/502',
              level: 1,
              icon: 'Memo',
              pid: '2',
              type: 0,
              permissionLevel: 0,
              children: []
            }

          ]
        },
      ] as Menu[]
    })

    const methods = {
      checkItem(menu:Menu){
        sendGlobalMessage("当前点击菜单:"+JSON.stringify(menu))
      }
    }

    const validators = {}


    const rules = reactive({})

    const refs = {}


    return {
      ...toRefs(data),
      ...methods,
      ...refs,
      validators,
      rules

    }
  }
})
</script>

<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
    <el-row>
      <el-text style="color:#1677FF">组件props:</el-text>
    </el-row>
    <el-row>
      <div style="display: flex;flex-direction: row;gap: 5px 15px;flex-wrap: wrap;align-items: center;">
        <div v-for="(item,index) in propList" style="width: calc(50% - 10px)" :key="index">
          属性名:{{ item.prop }} 默认值:{{ item.defaultValue || "" }} 说明:{{ item.instructions }}
        </div>
      </div>
    </el-row>

    <el-row>
      <el-text style="color:#1677FF">组件emits:</el-text>
    </el-row>
    <el-row>
      <div style="width:100%;display: flex;flex-direction: row;gap: 5px 15px;flex-wrap: wrap;align-items: center;">
        <div v-for="(item,index) in emitMethodList" style="width: calc(50% - 10px)" :key="index">
          事件名:{{ item.name }} 参数以及类型:{{ item.param || "" }} 说明:{{ item.instructions }}
        </div>
      </div>
    </el-row>
    <el-row>
      <el-text style="color:#1677FF">组件样式:</el-text>
    </el-row>
    <el-menu
        style="border:1px solid #1677ff"
        default-active="2"
        class="el-menu-vertical-demo"
    >
      <menu-item
          @checkItem="checkItem"
          v-for="menu in menuList"
          :key="menu.id"
          :menu="menu"
      />
    </el-menu>
  </div>
</template>

<style scoped>

</style>